import React, {Component} from "react";
import ReactEcharts from 'echarts-for-react';
import picture from '../timg.jpg';
import axios from "axios";
import {server_addr} from "../index";

export default class Manufacturing extends Component {
    constructor(props) {
        super(props);
        this.state = {
            option_1: {},
            option_2: {},
            option_3: {},
            accountsReceivableRatio: [],
            flowRatio: [],
            fixRatio: [],
            default: "83%"
        }
        this.getData = this.getData.bind(this);
        this.Format = this.Format.bind(this);
    }

    getData(){
        var stock = window.location.href.split('?')[1].split('=')[1];
        //存货周转天数
        axios.get(server_addr+"/operation/inventoryDays?stock="+stock,{}).then((res)=>{
            let dates = [];
            let data_1 = [];
            let data_2 = [];
            for(var key in res.data){
                dates.push(key);
                data_1.push(res.data[key].split(',')[0]);
                data_2.push(res.data[key].split(',')[1]);
            }
            this.setState({
                option_1: {
                    tooltip: {trigger: 'axis', transitionDuration:0,
                        formatter: function (params) {
                            var htmlStr = '';
                            htmlStr += '<div><span style="color:#fff;">' + params[0].name + '</span><br/> ';
                            for(var i=0;i<params.length;i++){
                                //前面的原点和他的颜色
                                htmlStr += '<span style="width: 8px;height: 8px;display:inline-block;border-radius: 50%;background-color:'+params[i].color+'"></span><span style="color:#fff;">&nbsp;' + params[i].seriesName + '&nbsp;:&nbsp;</span>'+
                                    '<span style="color:#fff;">' + params[i].value + '&nbsp;天</span><br/>';
                            }
                            htmlStr += '</div>';
                            return  htmlStr
                        }},
                    legend: {top: 25, left: 210, data: ['存货周转天数', '行业平均存货周转天数']},
                    toolbox: {
                        feature: {
                            dataView: {show: true, readOnly: false},
                            magicType: {show: true, type: ['line']},
                            restore: {show: true}
                        }
                    },
                    grid: {
                        left: "20%",
                        right: "10%"
                    },
                    xAxis: {
                        type: 'category',
                        data: this.Format(dates),
                        axisLabel: {
                            rotate: 35
                        }
                    },
                    yAxis: {type: 'value',name: '天数        '},
                    series: [
                        {
                            name: '存货周转天数',
                            type: 'bar',
                            data: data_1,
                            itemStyle:{
                                normal:{
                                    barBorderRadius: 3
                                }
                            }
                        },
                        {
                            name: '行业平均存货周转天数',
                            type: 'line',
                            symbol: 'none',
                            itemStyle:{
                                normal:{
                                    color:'green',
                                }
                            },
                            data: data_2,
                            markLine: {
                                data: [
                                    {type: 'average', lineStyle:{type:"solid", width: 2.5}}
                                ]
                            }
                        }
                    ]
                }
            })
        }).catch(function (error) {
            alert('未连接到服务器！');
        })
        //总资产周转率
        axios.get(server_addr+"/operation/totalRatio?stock="+stock,{}).then((res)=>{
            let dates = [];
            let data_1 = [];
            let data_2 = [];
            for(var key in res.data){
                dates.push(key);
                data_1.push(res.data[key].split(',')[0]);
                data_2.push(res.data[key].split(',')[1]);
            }
            this.setState({
                option_2: {
                    tooltip: {trigger: 'axis', transitionDuration:0,
                        formatter: function (params) {
                            var htmlStr = '';
                            htmlStr += '<div><span style="color:#fff;">' + params[0].name + '</span><br/> ';
                            for(var i=0;i<params.length;i++){
                                //前面的原点和他的颜色
                                htmlStr += '<span style="width: 8px;height: 8px;display:inline-block;border-radius: 50%;background-color:'+params[i].color+'"></span><span style="color:#fff;">&nbsp;' + params[i].seriesName + '&nbsp;:&nbsp;</span>'+
                                    '<span style="color:#fff;">' + params[i].value + '&nbsp;%</span><br/>';
                            }
                            htmlStr += '</div>';
                            return  htmlStr
                        }},
                    legend: {top: 25, left: 210, data: ['总资产周转率', '行业平均总资产周转率']},
                    toolbox: {
                        feature: {
                            dataView: {show: true, readOnly: false},
                            magicType: {show: true, type: ['bar']},
                            restore: {show: true}
                        }
                    },
                    grid: {
                        left: "10%",
                        right: "1%"
                    },
                    xAxis: {
                        type: 'category',
                        data: this.Format(dates),
                        axisLabel: {
                            rotate: 35
                        }
                    },
                    yAxis: {type: 'value',name: '%        '},
                    series: [{
                        name: '总资产周转率',
                        data: data_1,
                        type: 'line',
                        symbol: 'triangle',
                        symbolSize: 20,
                        lineStyle: {
                            color: 'red',
                            width: 3,
                            type: 'dashed'
                        },
                        itemStyle: {
                            borderWidth: 3,
                            borderColor: 'yellow',
                            color: 'black'
                        }
                    }, {
                        name: '行业平均总资产周转率',
                        data: data_2,
                        type: 'line',
                        symbol: 'diamond',
                        symbolSize: 20,
                        lineStyle: {
                            color: 'green',
                            width: 3,
                            type: 'dashed'
                        },
                        itemStyle: {
                            borderWidth: 3,
                            borderColor: 'yellow',
                            color: 'blue'
                        }
                    }
                    ]
                }
            })
        }).catch(function (error) {
            alert('未连接到服务器！');
        })
        //应收账款周转率
        axios.get(server_addr+"/operation/accountsReceivableRatio?stock="+stock,{}).then((res)=>{
            let data = [];
            for(var key in res.data){
                data.push(res.data[key]);
            }
            this.setState({
                accountsReceivableRatio: data
            })
        }).catch(function (error) {
            alert('未连接到服务器！');
        })
        //流动资金周转率
        axios.get(server_addr+"/operation/flowRatio?stock="+stock,{}).then((res)=>{
            let data = [];
            for(var key in res.data){
                data.push(res.data[key]);
            }
            this.setState({
                flowRatio: data
            })
        }).catch(function (error) {
            alert('未连接到服务器！');
        })
        //固定资金周转率
        axios.get(server_addr+"/operation/fixRatio?stock="+stock,{}).then((res)=>{
            let data = [];
            for(var key in res.data){
                data.push(res.data[key]);
            }
            this.setState({
                fixRatio: data
            })
        }).catch(function (error) {
            alert('未连接到服务器！');
        })
        //资产现金回收率
        axios.get(server_addr+"/operation/cashRatio?stock="+stock,{}).then((res)=>{
            let dates = [];
            let data = [];
            for(var key in res.data){
                dates.push(key);
                data.push(res.data[key]);
            }
            this.setState({
                option_3: {
                    tooltip: {trigger: 'axis', transitionDuration:0,
                        formatter: function (params) {
                            var htmlStr = '';
                            htmlStr += '<div><span style="color:#fff;">' + params[0].name + '</span><br/> ';
                            for(var i=0;i<params.length;i++){
                                //前面的原点和他的颜色
                                htmlStr += '<span style="width: 8px;height: 8px;display:inline-block;border-radius: 50%;background-color:'+params[i].color+'"></span><span style="color:#fff;">&nbsp;' + params[i].seriesName + '&nbsp;:&nbsp;</span>'+
                                    '<span style="color:#fff;">' + params[i].value + '&nbsp;%</span><br/>';
                            }
                            htmlStr += '</div>';
                            return  htmlStr
                        }},
                    legend: {
                        top: 20,
                        data: ['应收账款周转率', '流动资金周转率', '固定资金周转率', '资产现金回收率'],
                        textStyle: {
                            fontSize: 16
                        }},
                    toolbox: {
                        feature: {
                            dataView: {show: true, readOnly: false},
                            magicType: {show: true, type: ['bar']},
                            restore: {show: true}
                        }
                    },
                    grid: {
                        left: "10%",
                        right: "3%"
                    },
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            data: this.Format(dates)
                        }
                    ],
                    yAxis: [{type: 'value',name: '%        '}],
                    series: [
                        {
                            name: '应收账款周转率',
                            type: 'line',
                            smooth: true,
                            stack: '总量',
                            itemStyle:{
                                normal:{
                                    color:'green',
                                }
                            },
                            data: this.state.accountsReceivableRatio
                        },
                        {
                            name: '流动资金周转率',
                            type: 'line',
                            smooth: true,
                            stack: '总量',
                            data: this.state.flowRatio
                        },
                        {
                            name: '固定资金周转率',
                            type: 'line',
                            smooth: true,
                            stack: '总量',
                            data: this.state.fixRatio
                        },
                        {
                            name: '资产现金回收率',
                            type: 'line',
                            smooth: true,
                            stack: '总量',
                            data: data
                        }
                    ]
                }
            })
        }).catch(function (error) {
            alert('未连接到服务器！');
        })
    }

    Format(dates){
        let new_dates = []
        for(var i=0; i<dates.length; i++){
            switch (dates[i].split('-')[1]) {
                case '03':
                    new_dates.push(dates[i].split('-')[0].substring(2,)+'年季1');
                    break;
                case '06':
                    new_dates.push(dates[i].split('-')[0].substring(2,)+'年季2');
                    break;
                case '09':
                    new_dates.push(dates[i].split('-')[0].substring(2,)+'年季3');
                    break;
                case '12':
                    new_dates.push(dates[i].split('-')[0].substring(2,)+'年季4');
                    break;
                default:
                    new_dates.push(dates[i]);
            }
        }
        return new_dates;
    }

    componentDidMount() {
        this.getData()
        this.interval = setInterval(()=>{
            if(this.state.accountsReceivableRatio.length === 0
                || this.state.flowRatio.length === 0
                || this.state.fixRatio.length === 0){
                this.getData();
            }
            if(this.props.location.state){
                this.setState({
                    default: "94%"
                })
            }else{
                this.setState({
                    default: "83%"
                })
            }
        },100)
    }

    componentWillUnmount() {
        clearInterval(this.interval)
    }

    render() {
        document.title = "财务状况分析";
        return (
            <div style={{width:this.state.default, height:"100vh", float:"right"}}>
                <div style={{width:"46%", height:"40vh", float:"left", margin:"5vh 0 0 2%"}}>
                    <p style={{fontSize:"1.5vw", fontWeight:"bold", float:"left", marginLeft:"15%"}}>存货周转率</p>
                    <ReactEcharts option={this.state.option_1} notMerge={true}
                                  style={{width:"100%", height:"40vh"}}/>
                </div>
                <div style={{width:"46%", height:"40vh", float:"left", margin:"5vh 0 0 0"}}>
                    <p style={{fontSize:"1.5vw", fontWeight:"bold", float:"left", marginLeft:"5%"}}>总资产周转率</p>
                    <ReactEcharts option={this.state.option_2} notMerge={true}
                                  style={{width:"95%", height:"40vh"}}/>
                </div>
                <div style={{width:"94%", height:"50vh", float:"left", margin:"0 0 0 2%"}}>
                    <ReactEcharts option={this.state.option_3} notMerge={true}
                                  style={{width:"95%", height:"50vh"}}/>
                </div>
            </div>
        );
    }
}